
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片倒影</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
  body {
    padding-top: 0px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .img-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: #000;
  }

  .img-wrapper > img{
    width:  260px;
    height: 400px;
    -webkit-box-reflect: below 15px linear-gradient(transparent,transparent,#000);
  }
</style>

<body>
  <div class="img-wrapper">
    <img src="./imgs/626.png" alt="">
  </div>
</body>

</html>